<template>
  <div class="benefit-tab-control">
    <div v-for="(item, index) in titles" :key="index" class="item" @click="handleSwitchTabControl(index)">
      <span :class="{active: currentIndex === index}">
        {{ item }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titles: ["红包", "商家代金券"],
      currentIndex: 0
    };
  },
  methods: {
    handleSwitchTabControl(index) {
      this.currentIndex = index
      this.$bus.$emit('handleSwitchTabControl',this.currentIndex)
    }
  }
};
</script>
<style lang="less" scoped>
.benefit-tab-control {
  display: flex;
  justify-content: space-around;
  padding: 15px 0;
  background-color: #fff;
  font-size: 14px;
  .item {
    color: #333333;
  }
  .active {
    padding-bottom: 5px;
    border-bottom: 2px solid #3190e8;
    color: #3190e8;
  }
}
</style>